<style>
    .image-lab img {
        width: 300px;
    }

    .zzk {
        position: absolute;
        font-size: 15px;
        border-radius: 20px;
        color: #FFFFFF;
        background: #9e9e9e;
        font-weight: 600;
        right: 5px;
        top: 5px;
    }

    .category_image {
        max-width: 55px;
        max-height: 36px;
    }
</style>
<form action="" class="layui-form" method="post" style="margin: 20px">
    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-inline">
            <select name="goods[cat_id]" data-url="{:url('getflist')}" lay-filter="category_one"
                    lay-verify="required" lay-search="">
                <option value=""></option>
                {volist name="category" id="c"}
                <option value="{$c.id}">{$c.name}</option>
                {/volist}
            </select>
        </div>
        <!--<label class="layui-form-label">二级分类</label>-->
        <!--<div class="layui-input-inline">-->
            <!--<select name="category_two_id" class="category_two" lay-verify="required">-->
                <!--<option value=""></option>-->
            <!--</select>-->
        <!--</div>-->
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属品牌</label>
        <div class="layui-input-inline">
            <select name="goods[brand_id]"
                    lay-verify="required">
                <option value=""></option>
                {volist name="brand" id="b"}
                <option value="{$b.id}">{$b.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" name="goods[goods_name]" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-inline">
                <input type="text" name="goods[inventory]" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品重量</label>
            <div class="layui-input-inline">
                <input type="text" name="goods[weight]" placeholder="单位KG" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
            <label class="layui-form-label">商品体积</label>
            <div class="layui-input-inline">
                <input type="text" name="goods[volume]" placeholder="单位立方米" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">市场价</label>
            <div class="layui-input-inline">
                <input type="text" name="goods[market_price]" placeholder="划线价" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
            <label class="layui-form-label">本店价</label>
            <div class="layui-input-inline">
                <input type="text" name="goods[shop_price]" placeholder="售价" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品关键词</label>
            <div class="layui-input-inline">
                <input type="text" name="goods[keywords]" placeholder="" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
            <label class="layui-form-label">商品卖点</label>
            <div class="layui-input-inline">
                <input type="text" name="goods[goods_remark]" placeholder="" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>


    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">减库存方式</label>
        <div class="layui-input-inline">
            <select name="goods[inventory_type]"
                    lay-verify="required">
                <option value="0">下单减库存</option>
                <option value="1">支付减库存</option>
            </select>
        </div>
        <label class="layui-form-label">是否包邮</label>
        <div class="layui-input-inline">
            <select name="goods[is_free_shipping]"
                    lay-verify="required">
                <option value="0">否</option>
                <option value="1">是</option>
            </select>
        </div>

        <label class="layui-form-label">是否上架</label>
        <div class="layui-input-inline">
            <select name="goods[is_on_sale]"
                    lay-verify="required">
                <option value="0">否</option>
                <option value="1">是</option>
            </select>
        </div>

    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">快递方式</label>
    <div class="layui-input-inline">
        <select name="goods[delivery_type]"
                lay-verify="required">
            <option value="0">快递</option>
            <option value="1">实体店自取</option>
        </select>
    </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="text" name="goods[sort]" placeholder="" autocomplete="off" class="layui-input" lay-verify="required">

        </div>
        <label class="layui-form-label">商品赠送积分</label>
        <div class="layui-input-inline">
            <input type="text" name="goods[give_integral]" placeholder="" autocomplete="off" class="layui-input" lay-verify="required">

        </div>
        <label class="layui-form-label">限购类型</label>
        <div class="layui-input-inline">
            <select name="goods[limit_type]"
                    lay-verify="required">
                <!--限制类型：0不限制1每天2每周3每月4每年5终身-->
                <option value="0">不限制</option>
                <option value="1">每天</option>
                <option value="2">每周</option>
                <option value="3">每月</option>
                <option value="4">每年</option>
                <option value="5">终身</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">限购数量</label>
    <div class="layui-input-inline">
        <input type="text" name="goods[limit_num]" placeholder="" autocomplete="off" class="layui-input" lay-verify="required">

    </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邀请佣金</label>
        <div class="layui-input-inline">
            <input type="text" name="invit" placeholder="百分比" autocomplete="off" class="layui-input" lay-verify="required">

        </div>
        <label class="layui-form-label">购买佣金</label>
        <div class="layui-input-inline">
            <input type="text" name="buy" placeholder="百分比" autocomplete="off" class="layui-input" lay-verify="required">

        </div>

    </div>


    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品图片</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-primary" id="goods_img">
                    <i class="layui-icon"></i> 上传图片
                </button>
            </div>
            <div>
                <label class="layui-form-label"></label>
                <div class="layui-form-mid layui-word-aux">最佳图片尺寸：750px * 750px <br>最多只能上传5张图片 <br>第一张为商品列表展示图片</div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <div class="image-lab">
                </div>
            </div>
        </div>
    </div>
    <div class="category">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">规格</label>
                <div class="layui-input-inline">
                    <input type="text" name="key_name[1]" lay-verify="required" autocomplete="off" class="layui-input ">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-inline">
                    <input type="number" step="0.01" name="price[1]" maxlength="8" autocomplete="off" class="layui-input " lay-verify="required">
                </div>
                <div class="layui-form-mid layui-word-aux">元</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">库存</label>
                <div class="layui-input-inline">
                    <input type="number" step="1" maxlength="8" name="store_count[1]" lay-verify="required" autocomplete="off"
                           class="layui-input ">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">规格图片</label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-primary category_img">
                        <i class="layui-icon"></i> 上传图片
                    </button>
                    <img src="" alt=""  class="category_image zoom-img">
                    <input type="hidden" lay-verify="required" name="spec_img[1]">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-sm addCategoty" type="button">
                        +
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text text">
        <label class="layui-form-label">商品详情</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容"  class="layui-textarea " id="layedit"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <button class="layui-btn" lay-submit="" lay-filter="ajax-layedit">添加</button>
    </div>
</form>

<script type="text/javascript">
    layui.use(['upload', 'form', 'layedit'], function () {
        var upload = layui.upload;
        var form = layui.form;
        var layedit = layui.layedit;
        //训练图片
        upload.render({
            elem: '#goods_img'
            , url: '{:url("common/upload")}'
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    if ($('.zzk').length != 5) {
                        x = '<a style="position: relative;display:inline-block "><i class="layui-icon zzk"></i><img class="goods_imgs" src="' + res.data.src + '" alt="">';
                        x += ' <input type="hidden" name="good_img[]" value="' + res.data.src + '"></a>';
                        $('.image-lab').append(x);
                    } else {
                        layer.msg("最多只能上传5张图片");
                    }
                } else {
                    var msg = res.msg ? res.msg : "网络错误";
                    layer.msg(msg);
                }
            }
        });

        layedit.set({
            uploadImage: {
                url: '{:url("Common/upload")}' //接口url
            }
        });
        //构建一个默认的编辑器
        var layedit_index = layedit.build('layedit', {
            tool: [
                'strong' //加粗
                , 'italic' //斜体
                , 'underline' //下划线
                , 'del' //删除线

                , '|' //分割线

                , 'left' //左对齐
                , 'center' //居中对齐
                , 'right' //右对齐
                , 'link' //超链接
                , 'unlink' //清除链接
                , 'image'//上传图片
            ]
        });

        form.on('submit(ajax-layedit)', function (data) {
            var loading = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            var url = data.form.action;
            var method = data.form.method;
            var d = data.field;
            d.content = layedit.getContent(layedit_index);
            $.ajax({
                type: method,
                url: url,
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    layer.close(loading);
                    msg = res.msg ? res.msg : '网络错误';
                    layer.msg(msg);
                    jumpUrl = res.jumpUrl;
                    if (res.code == 200) {
                        if (jumpUrl) {
                            window.location.href = jumpUrl;
                        } else {
                            window.location.reload();
                        }
                    }
                },
                error: function (res) {
                    layer.close(loading);
                    layer.msg("网络错误");
                }
            });
            return false;
        });

        // 商品分类联动
        form.on('select(category_one)', function (data) {
            var url = $(data.elem).data('url');
            $.post(url, {pid: data.value}, function (res) {
                console.log(res);
                var x = '';
                if (res.code == 200) {
                    console.log(res.data[r].name);
                    x += '<option value=""></option>';
                    for (r in res.data) {
                        x += ' <option value="' + res.data[r].id + '">' + res.data[r].name + '</option>';
                    }
                } else {
                    x += '<option value="">暂无分类</option>';
                }
                $('.category_two').html(x);
                form.render();
            })
        });
        $(document).on("click", ".zzk", function () {
            $(this).parent().remove();
        });

        $(document).on('click', '.category_img', function () {

        });
        //图片
        upload.render({
            elem: '.category_img'
            , url: '{:url("common/upload")}'
            , done: function (res, index, upload) {
                console.log($(this.item).parent().children('img'));
                if (res.code == 0) {
                    $(this.item).parent().children('.category_image').attr('src', res.data.src);
                    $(this.item).parent().children('input').attr('value', res.data.src);
                } else {
                    var msg = res.msg ? res.msg : "网络错误";
                    layer.msg(msg);
                }
            }
        });
        var number = 2;
        $(document).on("click", ".addCategoty", function () {
            var s = '<div class="layui-form-item">\n' +
                '            <div class="layui-inline">\n' +
                '                <label class="layui-form-label">规格</label>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <input type="text" name="key_name[' + number + ']" lay-verify="required" autocomplete="off" class=" layui-input">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '           <div class="layui-inline">\n' +
                '                <label class="layui-form-label">商品价格</label>\n' +
                '                <div class="layui-input-inline">\n' +
                '                   <input type="number" step="0.01" name="price[' + number + ']" maxlength="8" autocomplete="off" class="layui-input " lay-verify="required">\n' +
                '                </div>\n' +
                '                <div class="layui-form-mid layui-word-aux">元</div>\n' +
                '            </div>'+
                '            <div class="layui-inline">\n' +
                '                <label class="layui-form-label">库存</label>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <input type="number" step="1" name="store_count[' + number + ']" maxlength="8" lay-verify="required" autocomplete="off" class=" layui-input">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-inline">\n' +
                '                <label class="layui-form-label">规格图片</label>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <button type="button" class="layui-btn layui-btn-primary category_img'+number+'">\n' +
                '                        <i class="layui-icon"></i> 上传图片\n' +
                '                    </button>\n' +
                '                    <img src="" alt="" class="category_image zoom-img">\n' +
                '                    <input type="hidden" name="spec_img[' + number + ']">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-inline">\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-danger deleteCategoty" type="button">\n' +
                '                        -' +
                '                    </button>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </div>';

            $('.category').append(s);
            //训练图片
            upload.render({
                elem: '.category_img'+number
                , url: '{:url("common/upload")}'
                , done: function (res, index, upload) {
                    console.log($(this.item).parent().children('img'));
                    if (res.code == 0) {
                        $(this.item).parent().children('.category_image').attr('src', res.data.src);
                        $(this.item).parent().children('input').attr('value', res.data.src);
                    } else {
                        var msg = res.msg ? res.msg : "网络错误";
                        layer.msg(msg);
                    }
                }
            });
            number++;
            form.render();
        });
        // 移除
        $(document).on('click', '.deleteCategoty', function () {
            $(this).parents('.layui-form-item').remove()
        })
    })
</script>